<template>
	<view v-if="detail" class="detail">
		<!-- <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll"> -->
			<!-- 轮播图 -->
			<!-- <case-header @onTapItem="onTapItem"></case-header> -->
			<!-- 详情 -->
			<!-- <view class="title">360全方位保护爱车，拒绝裸奔</view> -->
			<view class="title">{{ detail.title==null?'':detail.title }}</view>
			<!-- <view class="uline"><u-line color="#e4e4e4"></u-line></view> -->
			<view class="detail-content">
				<view class="flex">
					<view class="left">品牌:</view>
					<view class="right">{{ detail.brand }}</view>
				</view>
				<view class="flex">
					<view class="left">车型:</view>
					<view class="right">{{ detail.type }}</view>
				</view>
				<view class="flex">
					<view class="left">产品:</view>
					<view class="right">{{ detail.product?detail.product:'暂无' }}</view>
				</view>
				<view class="flex">
					<view class="left">颜色:</view>
					<view class="right">{{ detail.color }}</view>
				</view>
			</view>
			<view class="img-wrap">
				<video v-if="detail.video" :src="detail.video" class="video" style="width:100%;"></video>
				<u-image @click="reviewImg(detail.img, imgIndex)" class="img" v-for="(img, imgIndex) in detail.img" :src="img" :key="imgIndex" mode="widthFix"></u-image>
			</view>
			
			<view class="detail_function">
				<!-- 浏览 -->
				<view>
					<img src="/static/home/view.png" alt="浏览" />
					{{ detail.view==null?0:detail.view }}
				</view>
				<!-- 点赞 -->
				<view @click="addLikes(detail)">
					<u-icon :color="likeState" style="margin-right: 10rpx;" name="thumb-up-fill" size="22"></u-icon>
					{{ detail.likes==null?0:detail.likes }}
				</view>
				<!-- 收藏 -->
				<view @click="collect(detail)">
					<u-icon :color="detail.isCollect==='f'?'#595959':'#FBCB11'" style="margin-right: 10rpx;" name="star-fill" size="22"></u-icon>
					{{ detail.collect==null?0:detail.collect }}
				</view>
			</view>
		<!-- </scroll-view> -->
		<u-toast ref="uToast"></u-toast>
		<!-- 底部导航 -->
		<!-- <u-tabbar v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar> -->
	</view>


</template>

<script>
	import CaseHeader from './components/CaseHeader'
	export default {
		components: {
			CaseHeader
		},
		data() {
			return {
				nav_current: 1,
				id: '',
				likeState:'#595959',
				// nav_list: [{
				// 		pagePath: "/pages/index/index",
				// 		iconPath: "home",
				// 		selectedIconPath: "home-fill",
				// 		text: '首页'
				// 	},
				// 	// {
				// 	// 	pagePath: "/pages/car/color",
				// 	// 	iconPath: "edit-pen",
				// 	// 	selectedIconPath: "edit-pen-fill",
				// 	// 	text: '改色'
				// 	// },
				// 	{
				// 		pagePath: "/pages/car/quote",
				// 		iconPath: "rmb-circle",
				// 		selectedIconPath: "rmb-circle-fill",
				// 		text: '报价'
				// 	},
				// 	{
				// 		pagePath: "/pages/product/product",
				// 		iconPath: "grid",
				// 		selectedIconPath: "grid-fill",
				// 		text: '产品'
				// 	},
				// 	{
				// 		pagePath: "/pages/about/my",
				// 		iconPath: "account",
				// 		selectedIconPath: "account-fill",
				// 		text: '关于我们'
				// 	},
				// ], // 底部导航
				detail: null,
				userId:2,
				isNew:false
			}
		},
		mounted() {
			this.getDetail()
		},
		onReady() {
			
		},
		onLoad(option) {
			this.id = option.id;
			// 判断是否登录，需要获取用户对应的收藏情况
			if(this.$store.state.phone_login_token)
				this.userId = JSON.parse(this.$store.state.user_message).id;
			this.isNew = option.isNew !== null&&option.isNew;
		},
		methods: {
			// 获取详情
			async getDetail() {
				this.loading = true;
				let res = await this.$api.getCarCaseById({id: this.id,userid:this.userId});
				this.loading = false;
				if(!res.success){
					return;
				}
				this.detail = res.result;
				this.detail.img = res.result.img?.split(',');
			},
			reviewImg(img,index){
				var arr=img;
				console.log(arr)
				console.log(index)
				uni.previewImage({
					current:index,
					indicator:"number",
					loop: true,
					urls:arr,
				})
			},
			// 点赞
			addLikes(detail){
				const id = detail.id;
				if(this.likeState==='#595959')this.likeState = '#FE020E';
				this.$api.likeCase({id:id});
				detail.likes++;
			},
			// 收藏或取消收藏
			collect(detail){
				const id = detail.id;
				if(detail.isCollect==='f'){
					detail.isCollect = 't';
					if(detail.collect!=null)detail.collect++;
					else detail.collect = 1;
					this.$refs.uToast.show({type:'success',title: "已收藏!"});
				}else{
					detail.isCollect = 'f';
					if(detail.collect!=null||detail.collect>0)detail.collect--;
					else detail.collect = 0;
					this.$refs.uToast.show({type:'error',title: "取消收藏!"});
				}
				this.$api.collect({
					collectionId:id,
					state:detail.isCollect,
					type: this.isNew?'2':'1',
					userId:this.userId
				});
			}
		}	
	}
</script>

<style lang="scss" scoped>
.scroll-Y {
	height: calc(100vh - 100px);
	// padding-bottom: 126rpx;
}
.title {
	font-size: 36rpx;
	padding: 26rpx 15rpx;
	font-weight: bold;
	text-align: center;
}
.img-wrap {
	text-align: center;
	.img {
		padding-bottom: 20rpx !important; 
	}
	.video {
		margin-bottom: 20rpx !important; 
	}
}
.detail-content {
	margin-top: 48rpx;
	padding: 30rpx;
	display: flex;
	flex-wrap: wrap;
	.flex {
		display: flex;
		width: 50%;
		color: gray;
		font-size: 26rpx;
		margin-bottom: 15rpx;
		.left {
			width: 100rpx;
			text-align: right;
			margin-right: 30rpx;
		}
		.right {
			flex: 1;
			color: black;
		}
	}
}
.uline{
	padding: 10px 0px;
}
.detail{
	background-color: #fff;
}
.detail_function{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: DIN, DIN;
	font-weight: 400;
	font-size: 22rpx;
	color: #595959;
	margin-top: 20rpx;
	padding-bottom: 30rpx;
	view{
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		img{
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
